<template>
  <el-table
    border
    :header-cell-style="{
      background: '#f2f2f2',
      height: '40px',
      padding: '0',
    }"
    :cell-style="{
      height: '40px',
      padding: '0',
    }"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column v-if="isSelection" type="selection"> </el-table-column>
    <el-table-column type="index" label="序号" width="50"> </el-table-column>
    <el-table-column
      v-for="(item, index) in tableCols"
      :key="index"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      show-overflow-tooltip
    >
      <template slot-scope="scope">
        <!-- 要么正常显示，要么显示prop -->
        <slot v-if="item.slot" :name="item.slot" :data="scope.row"> </slot>
        <span v-else>{{ scope.row[item.prop] }} </span>
      </template>
    </el-table-column>

    <el-table-column v-if="isOperation" label="操作">
      <template slot-scope="scope">
        <el-button size="mini" type="primary" @click="showEditView(scope.row)"
          >编辑</el-button
        >
        <el-button size="mini" type="danger" @click="deleteUser(scope.row)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
export default {
  name: "Table1",
  props: {
    tableData: {
      type: Array,
    },
    tableCols: {
      type: Array,
    },
    isSelection: {
      type: Boolean,
      default: true,
    },
    isOperation: { type: Boolean, default: true },
  },
  data() {
    return {
      selection: [],
      data: {},
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selection = selection;
      console.log(selection, "子组件的selection");
      return selection;
    },
    showEditView(scope) {
      this.data = scope;
      console.log("子组件向父组件传递方法==编辑===", this.data);

      this.$emit("showEditView", this.data);
    },
    deleteUser(scope) {
      this.data = scope;
      console.log("子组件向父组件传递方法==删除:", this.data);

      this.$emit("deleteUser", this.data);
    },
  },
};
</script>
<style lang=""></style>
